<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>千锋🤝美团大数据平台</title>
    <link rel="stylesheet" href="./assets/css/reset.css">
</head>
<body>
    <!-- <div class="test"></div> -->
    <!-- 头 -->
    <header>
        <h1>千锋🤝美团大数据平台</h1>
        <span></span>
    </header>

    <!-- 内容 -->
    <section class="main">
        <!-- 左 -->
        
        <div class="column">
            <!-- 左1 -->
            <span class="alltitle" style="display: block ;color:gray;margin: .25rem">标题样式<em class="blue"></em></span>
            <div class="box" style="height:4rem"></div>
            <!-- 左2 -->
            <span class="alltitle" style="display: block ;color:gray;margin: .25rem ;">标题样式<em class="blue"></em></span>
            <div class="box" style="height:2.6rem">
                <div class="wraptit" style="margin-top: .15rem;">
                    <span>单号</span><span>金额</span><span>时间</span>
                </div>
                <div class="wrap" style="overflow:hidden;">
                    <ul>
                        <li><span>1000320</span><span>199</span><span>5小时</span></li>
                        <li><span>1000321</span><span>200</span><span>14小时</span></li>
                        <li><span>1000322</span><span>201</span><span>165小时</span></li>
                        <li><span>1000323</span><span>202</span><span>6小时</span></li>
                        <li><span>1000324</span><span>203</span><span>7小时</span></li>
                        <li><span>1000325</span><span>204</span><span>17小时</span></li>
                        <li><span>1000326</span><span>205</span><span>18小时</span></li>
                        <li><span>1000327</span><span>206</span><span>19小时</span></li>
                        <li><span>1000320</span><span>199</span><span>5小时</span></li>
                        <li><span>1000321</span><span>200</span><span>14小时</span></li>
                        <li><span>1000322</span><span>201</span><span>165小时</span></li>
                        <li><span>1000323</span><span>202</span><span>6小时</span></li>
                        <li><span>1000324</span><span>203</span><span>7小时</span></li>
                        <li><span>1000325</span><span>204</span><span>17小时</span></li>
                    </ul>
                </div>
            </div>
            <!-- 左3 -->
            <span class="alltitle" style="display: block ;color:gray;margin: .25rem;">标题样式<em class="blue"></em></span>
            <div class="box" style="height:2.75rem;padding-top: .43rem;"></div>
        </div>

        <!-- 中 -->
        <div class="column">
            <!-- 中1 -->
            <div class="alltitle">标题样式 <div class="blue"></div></div>

            <div class="box" style="height: 2.3rem;display: flex;justify-content: space-between;">
                <div>
                    <div style="width: 3.66rem; font-size: .24rem;color: #fff;padding-top: .14rem;text-indent: .3rem;">
                        总体情况
                        <span style="font-size: .18rem;padding-left: .1rem;color: #fff;">单位(元)</span>
                    </div>
                    <div class="text" style="color: #fef000;text-indent: .25rem;font-size: .8rem;font-family: arial;border-top: .01rem solid rgba(255,255,255,.1);padding: .25rem 0;margin: .18rem 0;font-weight: bold;letter-spacing: .02rem;">
                        1895456
                    </div>
                </div>
            
                <div class="zb" style="display: flex;flex: 1;justify-content: space-around;">
                    <div>
                        <span style="padding-top: .2rem;display: block;text-align: center; color: #fff;font-size: .16rem;">标题样式</span>
                        <div class="c1 " style="width: 1.2rem; height: 2rem; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);" _echarts_instance_="ec_1654277280692"><div style="position: relative; width: 1.21rem; height: 2.02rem; padding: 0rem; margin: 0rem; border-width: 0rem; cursor: default;"><canvas data-zr-dom-id="zr_0" width="181" height="303" style="position: absolute; left: 0rem; top: 0rem; width: 1.21rem; height: 2.02rem; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0rem; margin: 0rem; border-width: 0rem;"></canvas></div></div>
                    </div>
                    <div style="margin: 0 .1rem;">
                        <span style="padding-top: .2rem;display: block;text-align: center; color: #fff;font-size: .16rem;">标题样式</span>
                        <div class="c2 " style="width: 1.2rem; height: 2rem; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);" _echarts_instance_="ec_1654277280693"><div style="position: relative; width: 1.21rem; height: 2.02rem; padding: 0rem; margin: 0rem; border-width: 0rem; cursor: default;"><canvas data-zr-dom-id="zr_0" width="181" height="303" style="position: absolute; left: 0rem; top: 0rem; width: 1.21rem; height: 2.02rem; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0rem; margin: 0rem; border-width: 0rem;"></canvas></div></div>
                    </div>
                    <div>
                        <span style="padding-top: .2rem;display: block;text-align: center; color: #fff;font-size: .16rem;">标题样式</span>
                        <div class="c3 " style="width: 1.2rem; height: 2rem; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);" _echarts_instance_="ec_1654277280694"><div style="position: relative; width: 1.21rem; height: 2.02rem; padding: 0rem; margin: 0rem; border-width: 0rem; cursor: default;"><canvas data-zr-dom-id="zr_0" width="181" height="303" style="position: absolute; left: 0rem; top: 0rem; width: 1.21rem; height: 2.02rem; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0rem; margin: 0rem; border-width: 0rem;"></canvas></div></div>
                    </div>
            
                </div>
            </div>
            <!-- 中2 -->
            <div class="alltitle">标题样式 <div class="blue"></div></div>
            <div class="box" style="height:3.5rem;padding: .13rem 0;"></div>
            <!-- 中3 -->
            <div class="alltitle">标题样式 <div class="blue"></div></div>
            <div class="box" style="height:3rem;padding-top: .4rem;"></div>
        </div>
        <!-- 右 -->
        <div class="column">
            <!-- 右1 -->
            <span class="alltitle" style="display: block ;color:gray;margin: .25rem">标题样式<em class="blue"></em></span>
            <div class="box" style="height: 3rem;">
                <div class="navboxall" style=" height: calc(100% - .3rem);padding: 0.1rem; ">
                    <table class="table1" width="100%" border="0" cellspacing="0" cellpadding="0">
                        <tbody>
                            <tr>
                                <th scope="col">排名</th>
                                <th scope="col">公司</th>
                                <th scope="col">数量</th>
                                <th scope="col">增长率</th>
                            </tr>
                            <tr>
                                <td><span>1</span></td>
                                <td>快手</td>
                                <td>114万<br /></td>
                                <td>100%<br /></td>
                            </tr>
                            <tr>
                                <td><span>2</span></td>
                                <td>抖音</td>
                                <td>923823万</td>
                                <td>21%</td>
                            </tr>
                            <tr>
                                <td><span>3</span></td>
                                <td>小红书</td>
                                <td>1240253万</td>
                                <td>12%</td>
                            </tr>
                            <tr>
                                <td><span>4</span></td>
                                <td>网易</td>
                                <td>1.2亿</td>
                                <td>39%</td>
                            </tr>
                            <tr>
                                <td><span>5</span></td>
                                <td>雅虎</td>
                                <td>13423万</td>
                                <td>9%</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <!-- 右2 -->
            <span class="alltitle" style="display: block ;color:gray;margin: .25rem">标题样式<em class="blue"></em></span>
            <div class="box" style="height: 3rem;">
                <div class="navboxall" style=" height: calc(100% - .3rem);padding: 0.1rem; ">
                    <table class="table1" width="100%" border="0" cellspacing="0" cellpadding="0">
                        <tbody>
                            <tr>
                                <th scope="col">排名</th>
                                <th scope="col">公司</th>
                                <th scope="col">数量</th>
                                <th scope="col">增长率</th>
                            </tr>
                            <tr>
                                <td><span>1</span></td>
                                <td>快手</td>
                                <td>114万<br /></td>
                                <td>100%<br /></td>
                            </tr>
                            <tr>
                                <td><span>2</span></td>
                                <td>抖音</td>
                                <td>923823万</td>
                                <td>21%</td>
                            </tr>
                            <tr>
                                <td><span>3</span></td>
                                <td>小红书</td>
                                <td>1240253万</td>
                                <td>12%</td>
                            </tr>
                            <tr>
                                <td><span>4</span></td>
                                <td>网易</td>
                                <td>1.2亿</td>
                                <td>39%</td>
                            </tr>
                            <tr>
                                <td><span>5</span></td>
                                <td>雅虎</td>
                                <td>13423万</td>
                                <td>9%</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <!-- 右3 -->
            <span class="alltitle" style="display: block ;color:gray;margin: .25rem">标题样式<em class="blue"></em></span>
            <div class="box box9" style="height: 2.8rem;padding-top: .5rem;"></div>
        </div>
    </section>

    <script src="./assets/js/flexible.js"></script>
    <script src="https://unpkg.com/webopenfather-date@1.0.1/dist/wofDate.js"></script>
    <script src="https://unpkg.com/echarts"></script>
    <script src="./assets/js/left1.js"></script>
    <script src="./assets/js/left2.js"></script>
    <script src="./assets/js/left3.js"></script>
    <script src="./assets/js/middle2.js"></script>
    <script src="./assets/js/middle1.js"></script>
    <script src="./assets/js/middle3.js"></script>
    <script src="./assets/js/right.js"></script>
    
    <!-- 头时间 -->
    <script>
        setInterval(() => {
            document.querySelector("header span").innerHTML=wofDate.format("Y年m月d日H时i分s秒")
        },1000)
    </script>
</body>
</html>



